<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line"></div>
            <span class="details_HeaderTitle">订单信息</span>
          </div>
          <div style="display: flex">
            <el-button type="primary" v-show="status == 1" @click="auditClick">入库</el-button>
            <el-button type="primary" v-show="status == 0" @click="editClick" v-permission="['salein.edit']" >修改</el-button>
            <el-button type="primary" v-show="status == 0" @click="delClick" v-permission="['salein.del']">删除</el-button>
            <el-button type="primary" v-show="status == 0" @click="confirmClick" >确认</el-button>
            <el-button type="primary" v-show="status == 1" @click="disConfirmClick">取消确认</el-button>
            <el-button type="primary" v-show="status == 2"  @click="disAuditClick">取消出库</el-button>
            <el-button type="primary" @click="printClick" v-permission="['salein.print']">打印</el-button>
          </div>
        </div>
        <div class="deleted_OrderHeader">
          <el-row :gutter="24">
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单号：</span>
              <span class="deleted_OrderTitle">{{form.sn}}</span>
            </el-col>
            <el-col :span="8">
            </el-col>
            <el-col :span="8">
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">客户名称：</span>
              <span class="deleted_OrderTitle">{{memberName}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">销售日期：</span>
              <span class="deleted_OrderTitle">{{form.createDate | datetimeFormatter}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">所属部门：</span>
              <span class="deleted_OrderTitle">{{form.officeId}}</span>
            </el-col>

          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">所属仓库：</span>
              <span class="deleted_OrderTitle">{{form.orderMethod}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">开票类型：</span>
              <span class="deleted_OrderTitle">{{form.taxType | watchTaxType}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">仓管员：</span>
              <span class="deleted_OrderTitle">{{form.operatorId}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">买家留言：</span>
              <span class="deleted_OrderTitle">{{form.memo}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="details_PayHeader">
          <div class="deleted_Line"></div>
          <span class="details_HeaderTitle">买家信息</span>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">买家昵称：</span>
                <span class="deleted_OrderName">{{form.consignee}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="height: 40px;display: flex;align-items: center">
                <span class="deleted_Row_Headings">联系电话：</span>
                <span class="deleted_OrderTitle">{{form.phone}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">联系地址：</span>
                <span class="deleted_OrderTitle">{{form.areaName}}{{form.address}}</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="product_header_name" style="">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">商品明细</span>
        </div>
        <!--商品规格-->
        <el-table
          :data="form.itemList"
          border
          show-summary
          stripe
          style="width: 100%">
          <el-table-column
            label="排序"
            type="index"
            width="50"
            fixed
          >
          </el-table-column>
          <el-table-column
            label="商品名"
            width="200">
            <template slot-scope="{row}">
              <span>{{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="规格"
            width="100"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.spec}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="货号/条码"
          >
            <template slot-scope="{row}">
              <span>{{row.sn}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="单位"
            width="100"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            prop="quantity"
            align="right"
            width="100">
          </el-table-column>
          <el-table-column
            label="单价"
            align="right"
            width="100">
            <template slot-scope="{row}">
              <span>{{row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="金额"
            width="100"
            align="right"
            prop="subTotal"
          >
          </el-table-column>
          <el-table-column
            label="优惠"
            width="100"
            align="right"
            prop="discount"
          >
          </el-table-column>
          <el-table-column
            label="实收"
            width="100"
            align="right"
            prop="amountPaid"
            fixed="right"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import {EventBus} from '@/api/eventBus'
  import {find, confirm, audit, disAudit,unconfirm,del,print} from '@/api/warehouse'
  import utils from '../../utils/utils.js'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import Distpicker from '@/components/Distpicker/Distpicker'
  import printJs from 'print-js';
  import { mapGetters } from 'vuex';
  export default {
    name: 'warehouse-view',
    directives: {elDragDialog,permission},
    data() {
      return {
        form: {
          id: '',
        },
        memberName:'',
        officeName:'',
        operatorName:'',
        status:0
      }
    },
    filters: {
      watchStatus(val) {
        if (val == 0) {
          return '待付款'
        } else if (val == 1) {
          return '已付款'
        } else if (val == 2) {
          return '待退款'
        } else if (val == 3) {
          return '已退款'
        }
      },
      watchTaxType(val){
        if (val == 0){
          return '不开票'
        } else if (val == 1){
          return '增票'
        } else if (val == 2){
          return '普票'
        }
      },
    },
    computed: {
      ...mapGetters([
        'token'
      ])
    },
    created() {
      var _this = this;
      _this.form.id = this.$route.query.id;
      _this.findClick()
      EventBus.$on('warehouse-edit', res => { // 监听新增完毕
        // 更新列表数组
        console.log(res)
        _this.form.id = res.id;
        _this.findClick()
      })
    },
    components: {Distpicker,},
    methods: {
      findClick() {
        var _this = this
        find(this.form.id).then(response => {
          console.log(response);
          _this.form = response.data;
          _this.status = response.data.status;
          _this.memberName = response.data.memberName;
          _this.operatorName = response.data.operatorName;
          _this.officeName = response.officeName;
        }).catch(error => {
        })
      },
      editClick() {
        this.$router.push({
          path: '/warehouse/edit', query: {id: this.form.id}
        })
      },
      confirmClick() {
        confirm(this.form.id).then(response => {
          this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          this.findClick()
        }).catch(error => {
        })
      },
      disConfirmClick(){
        unconfirm(this.form.id).then(response => {
          this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          this.findClick()
        }).catch(error => {
        })
      },
      auditClick() {
        audit(this.form.id).then(response => {
          this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          this.findClick()
        }).catch(error => {
        })
      },
      disAuditClick() {
        disAudit(this.form.id).then(response => {
          this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          this.findClick()
        }).catch(error => {
        })
      },
      delClick() {
        var _this = this
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(_this.form.id).then(response => {
            EventBus.$emit('warehouse-view', response.data)
            _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
              _this.$router.push({
                path: '/warehouse/list'
              })
            })// 关闭当前tab回到列表
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }).catch(error => {
            console.log('error!!')
          });
        }).catch(() => {
        });
      },
      printClick(){
        this.pdfUrl=process.env.VUE_APP_BASE_API + '/admin/order/print/'+this.form.id+'?token='+this.token
        window.open(this.pdfUrl);//printJS({printable: this.pdfUrl, type: 'pdf', header: 'My cool image header'})
      },
      exportViewClick(){
        this.exportView=process.env.VUE_APP_BASE_API + '/admin/order/export/'+this.form.id+'?token='+this.token
        window.open(this.exportView)
      }
    }
  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-size: 16px;
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 100px;
  }

  .deleted_OrderHeader {
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {
    font-size: 14px;
  }

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_Row_Headings {
    font-size: 14px;
    color: #666666;
    width: 85px;
  }

  .deleted_OrderName {
    font-size: 14px;
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 5px #409EFF solid;
    margin-bottom: 20px;
    background-color: #f2f2f2;
    margin-top: 20px;
  }
</style>
